<template>
  <div id="Entry" @mousewheel="mouseWheelHandle">
    <full-page :options="options" id="fullpage" ref="page">
      <div class="section" @click="_click">
        <Welcome />
      </div>
      <!--      第二屏-->
      <div class="section">
        <Work />
      </div>

      <div class="section">
        <News />
      </div>
      <!-- 设置分割线 -->
      <el-row :gutter="20">
        <el-col :span="16" :offset="4"><el-divider></el-divider></el-col>
      </el-row>

      <div class="section fp-auto-height">
        <Footer />
      </div>
    </full-page>
  </div>
</template>

<script>
import Work from "./home/Work";
import News from "./home/News";
import Footer from "./home/Footer";
import Welcome from "./home/Welcome.vue";
export default {
  name: "Test",
  data() {
    return {
      vedioCanPlay: false,
      fixStyle: "",
      kk:
        "M78.848 12.644v3.133H61.736l-.576 2.014h16.76v1.828l-1.669 7.233H59.375V23.45h13.581l.522-2.259H56.594v-1.7l1.063-3.715h-3.845v-3.133h25.036zM41.42 13.843v1.934h10.507v3.401H41.42v7.674h-4.08v-7.674H26.891v-3.401H37.34v-1.934h4.08zM18.104.85c-.101 7.245-.24 11.578-1.329 14.927h8.26v3.401h-9.898c-1.58 2.383-4.039 4.58-7.89 7.674H.968l.791-.625c3.87-3.053 6.53-5.151 8.334-7.049H0v-3.401h12.509c1.397-3.018 1.505-7.325 1.609-14.927h3.987zm3.06 20.029l3.867 5.973h-4.81l-3.867-5.973h4.81zm26.895 0l3.867 5.973h-4.811l-3.867-5.973h4.811zm-12.492 0l-3.866 5.973H26.89l3.866-5.973h4.811zM31.374 0l3.771 1.7h15.391v3.958c-1.14.987-2.862 2.413-5.857 3.91a89.124 89.124 0 007.248 1.468v3.63c-5.362-.847-9.447-1.862-12.608-2.907-3.2 1.074-7.255 2.09-12.428 2.904v-3.628a90.857 90.857 0 007.106-1.425c-2.22-1.1-3.65-2.124-4.73-2.898-.165-.118-1.678-1.256-1.678-1.256L31.374 0zM2.314 8.125l8.869 1.226v3.797L2.315 11.92V8.125zM77.365 1.7v8.93H55.295V1.7h22.07zm-31.91 3.4h-12.12c1.39.874 3.292 1.886 6.1 2.896 2.814-1.01 4.692-2.023 6.02-2.895zm27.83 0H59.375V7.23h13.91V5.102zm-70.97-3.4l8.869 1.226v3.797L2.315 5.497V1.7z",
      vol: {
        "icon-laba": false,
        "icon-jingyin": true,
      },
      muted: true,
      showBar: false,
      options: {
        licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
        onLeave: this.onLeave,
        scrollingSpeed: 850,
        resize: true,
        // loopBottom: true,
        recordHistory: true,
        scrollBar: false,
        scrollOverflow: false,
        navigation: true,
        navigationTooltips: ["欢迎", "科研", "新闻", "底部"],
        navigationPosition: "right", // 导航小圆点的位置
        keyboardScrolling: true, // 是否可以使用键盘方向键导航，默认为true
        continuousVertical: false, // 是否循环滚动，默认为false。如果设置为true，则页面会循环滚动，而不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容和，不要同时设置
        // menu: "#menu",
        // anchors: ["page1", "page2", "page3", "footer"],
        // sectionsColor: [
        // ],
      },
    };
  },
  components: {
    Work,
    News,
    Footer,
    Welcome,
  },
  methods: {
    _click() {
      this.$refs.page.api.moveSectionDown();
    },
    onLeave(index, nextIndex, direction) {
      if (index.isFirst) this.$emit('setShowNavi', true)
      else if (index.index === 1 && direction === 'up') this.$emit('setShowNavi', false)
    }
  },
  created: function () {
    this.$emit('setShowNavi', false)
  },
  destroyed() {
    this.$emit('setShowNavi', true)
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/HomeResource/css/normalize.css";
@import "../assets/HomeResource/css/font/iconfont.css";
@import "../../node_modules/fullpage.js/dist/fullpage.css";
/*  body {
   overflow:-Scroll;overflow-x:hidden;
 } */
* {
  touch-action: pan-y;
}
//  导航栏显示和隐藏动画
//  进入前
.fade-enter {
  opacity: 0;
  // transform: translateY(90vh);
}
// 退出后
.fade-leave-to {
  opacity: 0;
  // transform: translateY(90vh);
}

.fade-enter-active,
.fade-leave-active {
  transition: transform ease 0.8s, opacity ease 0.3s;
}

#Entry {
  .homepage-hero-module,
  .video-container {
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .video-container .poster img,
  .video-container video {
    z-index: 0;
    position: absolute;
  }
  .video-container .filter {
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
  }
  .homepage-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 2;

    .first-screen-logo {
      position: absolute;
      top: 60px;
      left: -webkit-calc(50% - 612px);
      left: -moz-calc(50% - 612px);
      left: calc(50% - 612px);
      width: 200px;
      color: #fff;
      font-size: 28px;
      font-weight: bolder;
      font-family: "华文彩云";
    }
    .first-screen-slogan {
      width: 50%;
      min-width: 400px;
      position: absolute;
      left: 30%;
      top: 25%;
    }
    .first-screen-btn {
      position: absolute;
      top: 65%;
      left: 75%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      margin-top: 60px;
      min-width: 188px;
      a {
        text-decoration: none;
        color: #fff;
        font-size: 30px;
        font-family: "宋体";
      }
      .btn {
        display: inline-block;
        width: 160px;
        height: 40px;
        text-align: center;
        line-height: 36px;
        border-radius: 5px;
      }
      .know-btn {
        margin-right: 20px;
        border: 1px solid #fff;
        transition: all 0.5s ease;
      }
      a:hover {
        text-decoration: none;
        color: rgb(96, 97, 96);
        font-size: 30px;
        font-family: "隶书";
        font-weight: bolder;
      }
      .know-btn:hover {
        border: 1px solid #fff;
        background-color: #fff;
      }
    }
  }
}
// .footer {
//   height: 44vh !important;
// }
.headbar {
  width: 100%;
  height: 64px;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #fff;
  z-index: 100;
  box-shadow: 0 30px 50px rgba(248, 248, 249, 0.7);
}
</style>

<style>
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span {
  background: rgb(52, 248, 248);
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  height: 6px;
  width: 6px;
  background: #52f5b1;
}
#fp-nav ul li .fp-tooltip {
  color:rgb(4, 160, 250);
  font-size: 15px;
  font-weight: bold;
}
</style>
